<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      height: 100px;
      width: 100px;
      background-color: pink;
      position: absolute;
    }
  </style>
  <script type="text/javascript">
  //使div可以根据不同的方向键向不同的方向移动
			/*
			 * 按左键，div向左移
			 * 按右键，div向右移
			 * 。。。
			 */
  window.onload = function () {
    document.onkeydown = function (event) {
      var box1 = document.getElementById('box1')
      event = window.event || event
      //定义一个变量，来表示移动的速度
      var speed = 10
	  	//当用户按了ctrl以后，速度加快
      if (event.ctrlKey) {
        speed = 500;
      }
      /*
        * 37 左
        * 38 上
        * 39 右
        * 40 下
        */
      switch(event.keyCode) {
        case 37:
          box1.style.left = box1.offsetLeft - speed + 'px'
          break;
        case 38:
          box1.style.top = box1.offsetTop - speed + 'px'
          break;
        case 39:
          box1.style.left = box1.offsetLeft + speed + 'px'
          break;
        case 40:
          box1.style.top = box1.offsetTop + speed + 'px'
          break;
        c
      }
    }
  }
  </script>
</head>
<body>
  <div id="box1"></div>
  
</body>
</html>